<template>
  <el-select size="mini" class="select"
             v-model.trim="custStatus"
             :placeholder="placeholder"
             :disabled="isNotAllowEdit"
             @change="handleChange">
    <el-option
      v-for="item in optionsStatus"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  import { isNotAllowEditStatus } from '@/utils/customerUtils.js'
  import bus from '@/store/eventBus'
  export default {
    name: 'CustomerStatusSelect',
    data () {
      return {
        optionsStatus: [],
        custStatus: ''
      }
    },
    props: {
      placeholder: {
        type: String,
        default: ''
      },
      isQuery: {
        type: Boolean,
        default: false
      },
      status: {
        type: String,
        default: null
      },
      isFull: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      isNotAllowEdit () {
        return this.status !== null ? isNotAllowEditStatus(this.$store.state.session.user) : false
      }
    },
    methods: {
      getCustStatus () {
        this.$emit('statusChange', this.custStatus)
      },
      handleChange (value) {
        this.$emit('statusChange', value)
      },
      getStatusByStatusConfig (custTmpl) {
        let statuses = []
        let status = custTmpl.status
        let statusConfig = custTmpl.statusConfig
        if (!statusConfig) return null
        for (let key in status) {
          // 是否为编辑的时候 是编辑的时候被停用的状态仍然显示 但是给予提示该状态已删除 添加的时候只显示没被停用的
          if (this.status) {
            if (statusConfig[key] && statusConfig[key].status === 'enabled') {
              statuses.push({ label: status[key], value: key })
            } else if (this.status === key) {
              statuses.push({ label: this.$t('customer.deleteStatus') + '(' + status[key] + ')', value: key })
            }
          } else {
            if (statusConfig[key] && statusConfig[key].status === 'enabled') {
              statuses.push({ label: status[key], value: key })
            }
          }
        }
        if (statuses.length === 0) return null
        if (this.status && !status[this.status]) {
          statuses.push({ label: this.$t('customer.deleteStatus'), value: this.status })
        }
        return {custStatus: statuses[0].value, statuses}
      },
      getStatus (custTmpl) {
        let statuses = []
        let isStatusOption = false
        for (let key in custTmpl.status) {
          statuses.push({ label: custTmpl.status[key], value: key })
        }
        for (let key in custTmpl.status) {
          if (this.status === key) {
            isStatusOption = true
            break
          }
        }
        if (this.status && !isStatusOption) {
          statuses.push({ label: this.$t('customer.deleteStatus'), value: this.status })
        }
        return {custStatus: 'status0', statuses}
      },
      fetchData () {
        Promise.all([
          this.$store.dispatch('getCache', { type: 'custTmpls' })
        ]).then(([custTmpls]) => {
          if (this._isDestroyed) {
            return
          }
          let custTmpl = custTmpls[0]
          // 这里应该处理两种情况 有无statusConfig字段 有则去按照statusConfig匹配出来 status数组 没有另处理
          let statuses = this.getStatus(custTmpl) || {}
          let statuses1 = this.getStatusByStatusConfig(custTmpl)
          // statuses1优先
          if (statuses1) {
            this.optionsStatus = statuses1.statuses
            this.custStatus = this.status || statuses1.custStatus
          } else {
            this.optionsStatus = statuses.statuses
            this.custStatus = this.status || statuses.custStatus
          }
        })
      }
    },
    beforeMount () {
      this.fetchData()
    },
    mounted () {
      if (this.isFull) {
        bus.$on('changeCusStatus', (msg) => {
          console.log('==========CustomerStatusSelect==========')
          this.fetchData()
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .select
    width 100%
</style>
